<template>
  <div class="w">
    <div class="header">
      <i class="iconfont icon-fanhui" @click="back"></i>
      <span class="title">我的报名</span>
    </div>
    <div class="info">
      <div class="info_card" v-for="(item, index) in signUpList" :key="index">
        <div class="card_left">
          <div class="left_title">{{ item.job.jobName }}</div>
          <div class="left_info">{{ item.job.shop }}</div>
        </div>
        <div class="card_right">
          <el-button size="mini" @click="delSignUp(item.id)">撤销</el-button>
          <el-button size="mini" @click="editSignUp(item.id)">修改</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      infoL: [],
      signUpList: [],
    };
  },

  created() {
    this.info = JSON.parse(localStorage.getItem('userInfo'));
    this.getSignUpList();
  },

  methods: {
    editSignUp(signUpId) {
      this.$router.push({ path: '/signUp', query: { signUpId: signUpId } });
    },
    async delSignUp(signUpId) {
      const { data: res } = await this.$http.delete('signUp/deleteSignUp/' + signUpId);
      if (res.code == 1) {
        this.getSignUpList();
        return this.$message.success(res.data);
      } else {
        return this.$message.error('报名撤销失败');
      }
    },
    back() {
      this.$router.go(-1);
    },
    async getSignUpList() {
      const { data: res } = await this.$http.get('signUp/getSignUp/' + this.info.id);
      if (res.code == 1) {
        this.signUpList = res.data;
        console.log(this.signUpList);
      } else {
        return this.$message.error('报名信息获取失败');
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.w {
  height: 100vh;
  width: 100%;
  position: relative;
  .header {
    background-color: #f6cd54;
    height: 61px;
    color: #232425;
    text-align: center;
    position: relative;
    border: none;
    .icon-fanhui {
      position: absolute;
      font-size: 25px;
      line-height: 61px;
      left: 10px;
      font-weight: bold;
    }
    .title {
      font-size: 20px;
      line-height: 61px;
      font-weight: bold;
    }
  }
  .info::-webkit-scrollbar {
    display: none;
  }
  .info {
    height: calc(100vh - 61px);
    width: 100%;
    background-color: #f0f0f0;
    scrollbar-width: none;
    -ms-overflow-style: none;
    .info_card {
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 15px;
      background-color: #fefefe;
      border-bottom: 1px solid #f0f0f0;
      .card_left {
        .left_title {
          font-size: 17px;
          color: #000000;
        }
        .left_info {
          font-size: 14px;
        }
      }
      .card_right {
        :deep(.el-button--mini) {
          background-color: #f6cd54;
        }
      }
    }
  }
}
</style>